<template>
  <div>
    <QueryForm v-model="queryForm" @submit="reloadTable">
      <!--        <template #more="{ queryForm }">-->
      <!--          <n-form-item label="姓名">-->
      <!--            <n-input v-model:value="queryForm['111']" placeholder="输入姓名" />-->
      <!--          </n-form-item>-->
      <!--          <n-form-item label="姓名">-->
      <!--            <n-input v-model:value="queryForm['111']" placeholder="输入姓名" />-->
      <!--          </n-form-item>-->
      <!--          <n-form-item label="姓名">-->
      <!--            <n-input v-model:value="queryForm['111']" placeholder="输入姓名" />-->
      <!--          </n-form-item>-->
      <!--          <n-form-item label="姓名">-->
      <!--            <n-input v-model:value="queryForm['111']" placeholder="输入姓名" />-->
      <!--          </n-form-item>-->
      <!--        </template>-->
      <template #default="{ queryForm }">
        <n-form-item label="功能编码">
          <n-input v-model:value="queryForm['resourceCode-like']" placeholder="请输入功能编码" />
        </n-form-item>
        <n-form-item label="功能状态">
          <n-select style="width: 200px" v-model:value="queryForm['enabled']"
                    :options="enabledOptions" />
        </n-form-item>
        <n-form-item label="功能名称">
          <n-input v-model:value="queryForm['resourceName']" placeholder="请输入功能名称" />
        </n-form-item>
      </template>

    </QueryForm>
  </div>
  <div>
    <n-space>
      <n-button type="primary" @click="doSaveModal()">
        新建
      </n-button>
      <n-button type="warning" @click="doUpdateModal()">
        编辑
      </n-button>
      <n-button type="error" @click="doDeleteModal()">
        删除
      </n-button>
    </n-space>
  </div>
  <BasicTable
    :columns="tableColumns"
    :request="loadDataTable"
    :row-key="(row) => row.id"
    ref="tableRef"
    @update:checked-row-keys="onCheckedRowEvent"
    :scroll-x="1090"
  >
    <template #tableTitle>
    </template>
    <template #toolbar>
    </template>
  </BasicTable>

</template>

<script lang="ts">
import { defineComponent, watch } from "vue";
import { BasicTable } from "@/components/Table";
import httpApi from "../httpApi";
import { QueryForm } from "@/components/QueryForm/index";
import SlashAppContext from "@/context/SlashAppContext";
import {
  doDeleteModal,
  doSaveModal,
  doUpdateModal,
  enabledOptions,
  onCheckedRowEvent,
  queryForm,
  reloadTable,
  tableColumns,
  tableRef
} from "./Service";

export default defineComponent(
  {
    name: "SysResourceElmList",
    components: { BasicTable, QueryForm },
    props: {
      queryFormValue: {
        type: [Object],
        default: () => {
          return {};
        }
      }
    },
    setup(props, ctx) {
      console.log("aa初始:{}", queryForm.value);
      queryForm.value = Object.assign(queryForm.value, props.queryFormValue);
      console.log("aa结果:{}", queryForm.value);
      const loadDataTable = async (res) => {
        return await httpApi.selectSysTbResourcePageList({
          resourceType: "elm",
          resourceAppCode: SlashAppContext.getRequest().appCode,
          searchKey: null,
          ...res,
          ...queryForm.value
        });
      };

      watch(props.queryFormValue, () => {
        queryForm.value = Object.assign(queryForm.value, props.queryFormValue);
        console.log("更新完成");
      });
      return {
        loadDataTable,
        reloadTable,
        tableColumns,
        onCheckedRowEvent,
        tableRef,
        queryForm,
        doSaveModal,
        doUpdateModal,
        doDeleteModal,
        enabledOptions
      };
    }
  }
);


</script>

<style lang="less" scoped></style>
